@charset "utf-8";

#navegador ul {
   display: flex;
   list-style-type: none;
   justify-content: center;
   flex-wrap: wrap;
   align-content: space-around;
}

#navegador li {
   display: flex;
   padding-right: 2.5em;
   padding-bottom: 1.5em;
}

#navegador li a {
   padding: 1em 2em 1em 2em;
   color: deepskyblue;
   background-color: #eeeeee;
   border: 1px solid rgb(0, 0, 0);
   font-family: 'Courier New', Courier, monospace;
   text-decoration: none;
}

#logo {
   display: block;
   margin: auto;
   width: 22em;
   margin-top: 3em;
   margin-bottom: 3em;
}

.mapa {
   display: block;
   margin: auto;
   margin-bottom: 2.5em;
}

.texto {
   margin-bottom: 1em;
   font-family: 'Courier New', Courier, monospace;
   text-align: center;
   text-decoration-line: underline
}

.grilla-galeria {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   text-align: center;
   margin-bottom: 2em;
}

.imagen-contenedor {
   position: relative;
   display: flex;
   width: 12em;
   height: 12em;
   padding: 0.5em;
}

.imagen-avatar {
   width: 12em;
   height: 12em;
   transition: .2s ease-in-out;
}

.imagen-capa {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0.5em;
   opacity: 0;
   transition: .5s ease-in-out;
   background-color: black;
 }
 
 .imagen-texto {
   color: deepskyblue;
   font-size: 1.2em;
   position: absolute;
   top: 50%;
   left: 50%;
   opacity: 0;
   transform: translate(-50%, -50%);
   transition: .10s ease-in-out;
   font-family: 'Courier New', Courier, monospace;
   font-weight: bold;
   font-size: 1.5em;
 }
 
 .imagen-contenedor:hover .imagen-capa {
   opacity: 0.7;
 }

 .imagen-contenedor:hover .imagen-texto {
   opacity: 0.7;
 }

 #aclaracion {
   font-size: 0.7em;
   font-style: italic;
   text-align: center;
   color: lightsteelblue;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.linea-divisioria {
   width: 75%;
   max-width: 50em;
   margin-top: 2em;
   margin-bottom: 2em;
}

#pie {
   margin-top: 2em;
   text-align: center;
   color: rgb(100, 100, 98);
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 0.7em;
}

.planif {
   font-family: 'Courier New', Courier, monospace;
   margin: 0 25% 1em 25%;
}

@media (min-width: 50em) {
#pie {
   display: flex;
   justify-content: center;
   text-align: left;
   margin-top: 2em;
   color: rgb(100, 100, 98);
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 0.7em;
}

#pie div {
   margin-right: 5em;
   margin-left: 5em;
}
}